<template>
    <section>
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">营收合计</span></strong>
            </div>
            <div class="body-content">
                <el-form :inline="true">
                    <el-form-item label="时间:">
                        <el-date-picker v-model="dateValue" @change="dateChange" type="daterange" value-format="yyyy-MM-dd" :picker-options="pickerOptions" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size='small' style="width: 350px" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="small" @click='sumTotalAmount'>查询</el-button>
                    </el-form-item>
                </el-form>
                <p>会员营收</p>
                <el-table border v-loading="loading" :data="serviceData" style="width: 100%">
                    <el-table-column prop="serviceTotalAmount" label="会员总收入" />
                    <el-table-column prop="serviceBonusAmount" label="会员返佣" />                    
                    <el-table-column prop="serviceGainAmount" label="应得利润"/>
                </el-table>
                <p>办卡营收</p>
                <el-table  
                    v-loading="loading"
                    border :data="orderData" style="width: 100%">
                    <el-table-column prop="orderTotalAmount" label="办卡总收入" />
                    <el-table-column prop="orderBonusAmount" label="办卡返佣" />
                    <el-table-column prop="orderWaitBonusCount" label="办卡待返佣" />
                    <el-table-column prop="orderGainAmount" label="办卡利润"/>
                </el-table>
            </div>
        </div>
    </section>
</template>

<script>
import * as api from "../../api/api";
export default {
    data() {
        return {
            orderData: [],
            serviceData: [],
            dateValue: "",
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            },
            loading: false
        };
    },
    methods: {
        // 时间change
        dateChange(date) {
            if (date != null) {
                this.startTime = date[0];
                this.endTime = date[1];
            } else {
                this.startTime = "";
                this.endTime = "";
            }
        },
        sumTotalAmount() {
            this.orderData = [];
            this.serviceData = [];
            this.loading = true;
            return api
                .sumTotalAmount({
                    startTime: this.startTime,
                    endTime: this.endTime
                })
                .then(res => {
                    const {
                        serviceGainAmount,
                        serviceBonusAmount,
                        serviceTotalAmount,
                        orderBonusAmount,
                        orderGainAmount,
                        orderTotalAmount,
                        orderWaitBonusCount
                    } = res.data;
                    this.serviceData.push({
                        serviceGainAmount,
                        serviceBonusAmount,
                        serviceTotalAmount
                    });
                    this.orderData.push({
                        orderBonusAmount,
                        orderGainAmount,
                        orderTotalAmount,
                        orderWaitBonusCount
                    });
                })
                .finally(() => {
                    this.loading = false;
                });
        }
    },
    mounted() {
        // 获取财务打款明细
        this.sumTotalAmount();
    }
};
</script>

<style>
</style>
